import React, { Component, Suspense } from 'react';
import { connect } from 'dva';
import PageLoading from '@/components/PageLoading';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { Row, Col, Card, Modal, message, Layout, Radio, Spin, Button } from 'antd';
import styles from './index.less';
import LeftTree from './leftTree/index';
import StaffList from './rightList/index';
import { doRobotList } from '@/services/robotManagement';
import { doCancelSync, getFullSyncStatus } from '@/services/user';

const { Header, Content, Footer, Sider } = Layout;

let checkInterval = null
class StaffManage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedNode: {},
      list: [],
      infoId: null,
      infoData: null,
      globalLoading: true,
    };
  }

  componentDidMount() {
    this.checkSyncStatus()
  }

  getList = async () => {
    const res = await doRobotList({ current: 1, size: 999999 });
    this.setState({
      list: res ? res : [],
      infoId: res && res.length > 0 ? res[0].id : null,
      infoData: res && res.length > 0 ? res[0] : null,
    }, () => {
      this.LeftTree.getCategoryTree();
      this.StaffList.getList();
      this.StaffList.getCategoryTree();
    });
  }

  onChange = e => {
    this.setState({ infoId: e.target.value, infoData: e.target.item }, () => {
      this.LeftTree.getCategoryTree();
      this.StaffList.state.categoryId = null;
      this.StaffList.getList();
    });
  }

  //选中树
  treeNodeSelect = node => {
    console.log(node);
    this.setState({ selectedNode: node }, () => {
      this.StaffList.getSelectData(node);
    });
  };

  getTreeList = () => {
    this.LeftTree.getCategoryTree();
    this.StaffList.getList();
  }

  cancelSync = async () => {
    const res = await doCancelSync();
    message.info(res.data)
    this.checkSyncStatus()
  }

  toggleGlobalLoading = flag => {
    this.setState({
      globalLoading: flag
    })
  }

  checkSyncStatus = async (showMessage) => {
    const res = await getFullSyncStatus()
    console.log(res);
    switch (res.data) {
      case '0':
        //未同步
        this.LeftTree.getCategoryTree(true);
        this.toggleGlobalLoading(false)
        clearInterval(checkInterval)
        checkInterval = null
        break;
      case '1':
        //同步中
        this.toggleGlobalLoading(true)
        if (!checkInterval) {
          checkInterval = setInterval(() => {
            this.checkSyncStatus()
          }, 5000)
        }
        break;
      case '2':
        //同步成功
        this.toggleGlobalLoading(false)
        this.LeftTree.getCategoryTree(true);
        message.info('同步成功')
        clearInterval(checkInterval)
        checkInterval = null
        break;
      case '3':
        //同步失败
        this.toggleGlobalLoading(false)
        this.LeftTree.getCategoryTree(true);
        message.info('同步失败')
        clearInterval(checkInterval)
        checkInterval = null
        break;
    }
  }

  componentWillUnmount() {
    console.log('离开了当前页面');
    clearInterval(checkInterval)
    checkInterval = null
  }

  render() {
    const { list, infoId, infoData, globalLoading } = this.state;

    return (
      <Suspense fallback={<PageLoading />}>
        <PageHeaderWrapper>
          <Spin spinning={globalLoading}
            tip={
              <div>
                <p>通讯录正在同步，请稍等...</p>
                <Button onClick={this.cancelSync} type="primary" size="small">取消同步</Button>
              </div>
            }>
            {/* <Card className={styles.topCard}>
              <div className={styles.topTitle} style={{ height: '20px' }}>
                <span>员工管理</span>
              </div>
              <Radio.Group value={infoId} onChange={this.onChange}>
                {list.map((item, index) => {
                  return (
                    <Radio.Button value={item.id} key={index} item={item}>{item.name}</Radio.Button>
                  )
                })}
              </Radio.Group>
            </Card> */}
            <Layout className={styles.layout}>
              <Sider width={260} style={{ background: '#fff' }}>
                <div className={styles.leftTitle}>
                  <span>部门</span>
                </div>
                <div className={styles.leftContent}>
                  <LeftTree
                    treeNodeSelect={this.treeNodeSelect}
                    // applicationId={infoData ? infoData.applicationId : null}
                    title={'分类'}
                    treeType={2}
                    onRef={ref => (this.LeftTree = ref)}
                  />
                </div>
              </Sider>
              <Content>
                <div className={styles.rightTitle}>
                  <span>员工列表</span>
                </div>
                <div style={{ background: '#FFF', padding: '0 20px 20px' }}>
                  <StaffList
                    onRef={ref => (this.StaffList = ref)}
                    getList={this.getTreeList}
                    toggleGlobalLoading={this.toggleGlobalLoading}
                    checkSyncStatus={this.checkSyncStatus}
                  />
                </div>
              </Content>
            </Layout>
          </Spin>
        </PageHeaderWrapper>
      </Suspense>
    );
  }
}

export default connect()(StaffManage);
